<template>
    <div :class="['message-item',reply.chatfrom===1?'chatfrom':'']">
        <div class="text-reply box-shadow" v-if="+message.msgtype===1" @click="click"
             v-html="emojiParse(message.content.replace(/\n/gi,'<br />'))">
        </div>
        <div class="image-reply box-shadow" v-else-if="+message.msgtype===2" @click="click">
            <img class="img-context" :preview="reply.id"
                 :src="message.src?config.apiUrl+message.src: ('data:image/png;base64,' + (message.data||message.content))"/>
        </div>
        <div class="image-reply box-shadow" v-else-if="+message.msgtype===3" @click="click">
            <img class="img-context" :preview="reply.id" :src="message.content"/>
        </div>
        <div class="text-reply box-shadow" v-else-if="+message.msgtype===4" @click="click">
            视频：{{ message.content||message.src }}
        </div>
        <div class="file-card box-shadow" v-else-if="+message.msgtype===6" @click="click">
            <div class="flex-row file-desc">
                <div class="flex-column text-wrap file-title" style="">
                    <span class="name">{{ message.title || message.content || '文件' }}</span>
                </div>
                <div class="file-cover">
                    <i class="el-icon-document"/>
                </div>
                <!-- <img :src="message.src" alt=""> -->
            </div>
        </div>
        <a class="link-card box-shadow" target="_blank" :href="message.url||message.link" v-else-if="+message.msgtype === 10"
           @click="click">
            <div class="link-title">{{message.title}}</div>
            <div class="link-content flex-row">
                <div class="link-desc fontGrey">{{message.content}}</div>
                <img :src="message.src" class="link-cover">
            </div>
        </a>
        <div class="friend-card box-shadow" @click.stop="cardClick()" v-else-if="+message.msgtype===13" @click="click">
            <div class="flex-row info">
                <img class="avatar" :src="message.src" alt="">
                <div class="flex-column text-wrap" style="">
                    <span class="name">{{ message.title }}</span>
                    <span class="account textEllipsis"
                          v-if="(message.content||message.alias||message.wxid) && (message.content||message.alias||message.wxid).indexOf('@stranger')==-1   ">{{message.alias||message.wxid||message.content}}</span>
                </div>

            </div>
            <div style="border-top:1px solid #ddd;padding:10px 0;color:#aaa;font-size:12px;">
                {{ message.certflag == 0?'个人名片':'公众号名片' }}<span style="float:right" v-if="reply.sendstatus">{{wechatCode[reply.sendstatus]}}</span>
            </div>
        </div>
        <div class="link-card box-shadow" target="_blank" :href="message.url||message.link" v-else-if="+message.msgtype===14"
             @click="click">
            <div class="link-title">邀请你加入群聊</div>
            <div class="link-content flex-row">
                <div class="link-desc fontGrey">{{message.content}}</div>
                <img :src="message.src" class="link-cover">
            </div>
        </div>
        <div class="text-reply box-shadow" v-else @click="click">
            {{ message.content }}
        </div>
    </div>
</template>
<script>
    import {html2Escape} from '@/lib/utils.js'
    import emojiParse from '@/lib/wechat-emoji'
    import wechatCode from '@/lib/wechat-code'
    import {mapActions, mapMutations, mapState} from 'vuex';

    export default {
        name: 'message',
        props: {
            reply: {
                type: Object
            } 
        },
        data() {
            return {wechatCode, message: {}}
        },
        created() {
            this.tranContent()
        },
        computed: {
            ...mapState(['currentService', 'chatMap', 'uistate', 'accountMap']),

            account() {
                const accountid = this.uistate.accountid
                return this.accountMap[accountid]
            }
        },
        watch: {
            reply() {
                this.tranContent()
            }
        },
        methods: {
            ...mapActions(['acceptCard']),
            ...mapMutations(['updateChat']),
            tranContent() {
                let content = {}
                if (typeof this.reply.content === 'string') {
                    try {
                        content = JSON.parse(this.reply.content)
                    } catch (error) {
                        content = {content: this.reply.content}
                    }
                } else {
                    content = this.reply.content
                }
                this.message = content
            },
            click() {
                this.$emit('click')
            },

           
            cardClick() {
                const {csid, msgid, id} = this.reply;
                const chat = this.chatMap[this.uistate.chatid]
                const account = this.account
                console.log(account)
                const {friendwxid} = chat
                let confirmMsg = ''
                if (friendwxid.indexOf('@chatroom') > -1) {
                    confirmMsg = '我是 ' + (chat.friendNick || '群聊天') + ' 的 ' + account.nick
                } else {
                    confirmMsg = '我是' + chat.friendNick
                }
                console.log(this.chatMap[this.uistate.chatid])
                const message = prompt('你需要发送验证申请，等对方通过', confirmMsg)
                if (!message) return;
                this.acceptCard({
                    csId: csid, chatId: id, message
                })
                this.updateChat({msgid, csid, sendstatus: '-100'})
            },
            html2Escape,
            emojiParse
        }
    }
</script>
<style scoped>
    .message-item {
        margin: 0 0 6px 0;
        position: relative;
    }
    .message-item:focus{
        opacity: .6;
        outline: none;
    }
    .box-shadow{
        box-shadow: 0 0 2px 0 rgba(0,0,0,.5)    
    }
    .text-reply {
        padding: 12px 8px;
        box-sizing: border-box;
        border-radius: 6px;
        background: #fff;
        max-width: 250px;
        word-break: break-word;
        word-wrap: break-word;
        line-height: 18px;
    }

    .chatfrom .text-reply{
        background: #b0e26e
    }

    .img-context {
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        max-width: 250px;
        display: block;
    }

    .friend-card {
        padding: 0 10px;
        background-color: #fff;
        border-radius: 5px;
        width: 220px;
        box-sizing: border-box;
    }

    .friend-card .info {
        align-items: center;
        padding: 10px 0
    }

    .self .friend-card .avatar {
        margin-right: 10px;
        margin-left: 0;
    }

    .friend-card .avatar {
        width: 40px;
        height: 40px;
        border-radius: 3px;
        background-color: #ddd;
        margin-right: 10px
    }

    .friend-card .text-wrap {
        overflow: hidden;
        flex: 1
    }

    .friend-card .name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        color: #333;
        font-size: 14px;
    }

    .friend-card .account {
        color: #aaa;
        font-size: 12px;
        margin-top: 6px;
        line-height: 14px;
    }

    .link-card {
        padding: 0 10px;
        background-color: #fff;
        border-radius: 5px;
        width: 220px;
        box-sizing: border-box;
        overflow: hidden;
        display: block;
    }

    .link-title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        margin: 10px 0;
        font-size: 14px;
        line-height: 15px
    }

    .link-content {
        margin-bottom: 10px;
        justify-content: space-between;
    }

    .link-cover {
        background-color: #ccc;
        width: 40px;
        height: 40px;
        margin-left: 5px;
        flex-shrink: 0;
    }

    .link-desc {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        height: 40px;
        line-height: 13px;
        font-size: 12px;
        word-break: break-all;

    }

    .file-card {
        padding: 0 10px;
        background-color: #fff;
        border-radius: 5px;
        width: 220px;
        box-sizing: border-box;
        overflow: hidden;
        display: block;
    }

    .file-desc {
        padding: 10px 0;
        justify-content: space-between;
    }

    .file-title {
        justify-content: center;

    }

    .file-title .name {
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 14px;
        line-height: 15px;
    }

    .file-cover {
        width: 40px;
        height: 40px;
        background-color: #f1f1f1;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #666;
        font-size: 26px;
        flex-shrink: 0;
    }

    .message-item .scan-button {
        height: 28px;
        text-align: center;
        line-height: 28px;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        position: absolute;
        right: 0;
        bottom: 0px;
        padding: 0 5px;
        display: none
    }

    .message-item .imageReply:hover .scan-button {
        display: block
    }

    .chatBox .chatItem .messageWrap .textReply {
        line-height: 18px
    }

</style>
